<template>
  <div>
    <div class="clearfix fr container_main" id="page222">
      <div id="left-box">
        <div class="bbs_detail_wrap" id="bbs_detail_wrap">
          <!--标题-->
          <div id="bbs_title_bar" class="bbs_title_bar">
            <div class="owner_top clearfix">
              <h3 class="owner_h">
                <span :title="forumById.forumTitle">{{ forumById.forumTitle }}</span>
              </h3>
              <div class="bbs_bread_wrap">
                <div class="tips" v-if="forumById.status=='0'" style="display:inline-block">
                  <span class="topics_type unr">待审核</span>
                </div>
                <div class="fav_box">
                  <a id="bbs_fav" class="fav_btn unsave" style="cursor: pointer;">收藏</a>
                  <a class="fav_btn reply_topic" @click="showEditorClick">回复</a>
                </div>
                <span class="fr point_num">[ {{ parseTime(forumById.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }} ]</span>
              </div>
            </div>

          </div>

          <!--楼主发贴信息-->
          <div class="mod_topic_wrap post topic">
            <!--左侧头像信息-->
                <div class="user_left">
                  <a class="user_head_box">
                    <img :src="forumById.avatar" class="avatar">
                  </a>
                 
                </div>
                <div class="user_right">
                  <div class="user_nick_name" style="padding-top: 10px">
                    <div class="nick_name" v-if="forumById.user">
                      <a  class="Hash" :title="forumById.user.nickName"
                      >{{ forumById.user.nickName }}</a>
                    </div>
                  </div>
                </div>

              <!--右侧内容-->
                <div class="post_body post_body_min_h">
                  <div class="qudiaoBorder">
                    <div class="editor ql-container ql-snow">
                      <div class="ql-editor text" v-html="forumById.forumContent"></div>
                    </div>
                  </div>
                </div>
                <div class="control control_new clearfix">
                  <div class="control_l fl">
                    <label class="date_time">{{ parseTime(forumById.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</label>
                  </div>
                  <!-- <div class="control_r fr">
                    <label @click="btnClick('fabulous')" class="red_praise digg d_hide">
                      <span class="icon_praise"></span>
                      <em>点赞</em>
                    </label>
                    <a href="javascript:void(0)" class="only-filter d_hide">只看楼主</a>
                    <a href="javascript:;" class="report_spam d_hide">举报</a>
                    <span class="floor">楼主</span>
                    <span class="floor pack_up">收起</span>
                  </div> -->
                </div>
                <div class="omit_wrap">
                  <div class="tips">
                    <span>展开阅读全文</span>
                    <i></i>
                  </div>
                </div>
           
          </div>

          <!--评论信息-->
          <div class="mod_topic_wrap post" v-for="(item,index) in replyList" :key="index">
            <dl class="topic_wrap clearfix">
              <dt class="topic_l ">
                <div class="user_left">
                  <a href="javascript:void(0)" target="_blank" class="user_head_box">
                    <img :src="changeAvatar(item.fromUser.avatar)" class="avatar">
                  </a>

                </div>
                <div class="user_right">
                  <div class="user_nick_name" style="padding-top: 10px;">
                    <div class="nick_name">
                      <a href="javascript:void(0)" class="Hash" target="_blank" :title="item.fromUser.nickName"
                      >{{ item.fromUser.nickName }}</a>
                    </div>
                  </div>
                </div>
              </dt>
              <dd class="topic_r post_info pb36">
                <div class="post_body post_body_min_h">
                  <div class="qudiaoBorder">
                    <div class="editor ql-container ql-snow">
                      <div class="ql-editor text" v-html="item.replyContent"></div>
                    </div>
                  </div>
                </div>
                <div class="control control_new clearfix">
                  <div class="control_l fl">
                    <label class="date_time">{{ parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</label>
                  </div>
                  <div class="control_r fr">
                    <!-- <label class="red_praise digg d_hide">
                      <span class="icon_praise"></span>
                      <em v-if="item.fabulous<=0">点赞</em>
                      <em v-else>点赞 {{ item.fabulous }}</em>
                    </label>
                    <a href="javascript:void(0)" class="only-filter d_hide">只看TA</a>
                    <a href="javascript:;" class="report_spam d_hide">举报</a> -->
                    <span class="floor">#{{ index + 1 }}</span>
                  </div>
                </div>
              </dd>
            </dl>
          </div>

          <!--分页，收藏，点赞-->
          <div class="paginate_box " id="replyHeight" :class="btnFlag?'replyHeight':''">
          
            <div class="fav_box fr">
              <a href="javascript:;" class="fav_btn pick">收起</a>
            </div>

            <div class="mod_fun_wrap clearfix fr detail" v-if="forumById.userId==user.userId">
              <ul class="fun_l fr" v-if="forumById.accept=='0'">
                <li><a href="javascript:void(0)" @click="acceptClick" class="menu_a">结贴</a></li>
              </ul>
              <ul class="fun_l fr" v-if="forumById.accept=='1'">
                <li><a href="javascript:void(0)" class="menu_a">已结贴</a></li>
              </ul>
            </div>
            <div class="fav_box fr">
              <!-- <a data-report-click="{&quot;spm&quot;:&quot;3001.4211&quot;}" id="bbs_fav" class="fav_btn unsave"
                 data-bind-collection="true" rel="nofollow" style="cursor: pointer;"
              >收藏</a> -->
              <a @click="showEditorClick"  class="fav_btn reply_topic">回复</a>
            </div>
          </div>

          <div class="mod_topic_wrap mar_no_top" id="answer_wrap" :class="[showFull?'fullShow_class':'']">
            <div :style="{'display':showEditor? 'none':'block'}" class="csdn_bbs_warp"
                 style="width: 1032px;height: 36px;"
            >
              <span @click="showEditorClick" class="fl" style="width: 940px;">我也来说一句...</span>
              <span @click="showEditorClick" class="fr">回帖</span>
            </div>

            <div class="csdn-bbs" :style="{'display':showEditor? 'block':'none'}" :class="[showFull?'fullWidth':'']">
              <!-- <div title="全屏" class="icon_fullScreen" @click="fullClick"></div> -->
              <div style="padding: 12px 24px">
                <el-form ref="form" :model="form" :rules="rules" label-width="0px">
                  <el-form-item prop="replyContent">
                    <editor v-model="form.replyContent" :min-height="192"/>
                  </el-form-item>
                  <div class="tijiao">
                    <span class="fr" style="font-size:0;height: 28px;">
                      <input @click="submitForm" type="button" value="提交回复" class="btn_b">
                    </span>
                  </div>
                  <!-- <div style="clear:both"></div>
                  <ul class="pub_list_new">
                    <li>请遵守中原工学院社联论坛准则，不得违反国家法律法规; 转载文章请注明出自中原工学院，如是商业用途请联系原作者 ; 请不要讨论政治相关话题。</li>
                  </ul> -->
                </el-form>
              </div>
            </div>
          </div>


        </div>
      </div>
      <!--回复消息-->

    </div>
  </div>
</template>

<script>
// import Editor from '@/components/Editor'
import { mapGetters } from 'vuex'
import { getForum, updateReplyNumber,updateAccept } from '@/api/forum'
import { listReply, addReply } from '@/api/forumReply'
import {addMessage} from '@/api/message'
import { getToken } from '@/utils/auth'
import store from '@/store'

export default {
  name: 'edit',
  components: {  },
  data() {
    return {
      showEditor: false,
      forumById: {}, //单条帖子
      replyList: [], //评论列表
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        replyContent: [
          { required: true, message: '文章内容不能为空', trigger: 'blur' }
        ]
      },
      btnFlag: true,
      showFull:false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        fromId: undefined,
        report: '0',
        status: '0',
        orderByColumn: "reply_id",
        isAsc:'asc'
      }
    }
  },
  computed: {
    ...mapGetters(['user']),
    forumId() {
      return this.$route.query.id
    }
  },
  mounted() {
    // window.addEventListener('scroll', this.scrollToTop, true)
    this.getList(this.$root.$mp.query.id)
  },
  created() {
  },
  methods: {
    //获取论坛数据
    getList() {
      getForum(this.forumId).then(res => {
        this.forumById = res.data
        this.forumById.avatar = this.changeAvatar(this.forumById.user.avatar)
        this.getRelyList()
      })
    },
    //获取评论列表
    getRelyList() {
      this.queryParams.forumId = this.forumId
      listReply(this.queryParams).then(result => {
        this.replyList = result.rows
        this.total = result.total
      })
    },

    //全屏按钮
    // fullClick(){
    //   this.showFull=!this.showFull
    //   if (!this.showFull){
    //     var PageId = document.querySelector('#answer_wrap')
    //     console.log("3333",PageId.offsetTop)
    //     window.scrollTo({
    //       'top': PageId.offsetTop,
    //       'behavior': 'smooth'
    //     })
    //   }
    //   this.$emit("fullShow", this.showFull)
    // },

    //结帖按钮
    acceptClick(){
      this.$confirm('您确定结束这篇帖子的回帖吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateAccept(JSON.parse(JSON.stringify(this.forumId)),'1').then(response => {
          if (response.code === 200) {
            this.msgSuccess('结帖成功')
            this.form={}
            this.showEditor=false
            this.getList()
          }else {
            this.msgError('结帖异常，请重试')
          }
        })
      }).catch(err => {
      })
    },

    //展开回帖按钮
    showEditorClick(){
      if (!getToken()) {
        this.$confirm('您未成功登录，您可以继续留在该页面，或者登录', '系统提示', {
            confirmButtonText: '登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('LogOut').then(() => {
            location.href = '/login'
          })
        }).catch(() => {
        })
      } else {
        if (this.forumById.status!='1'){
          this.$message({
            showClose: true,
            message: '帖子待审核中，暂不允许回帖？',
            type: 'warning'
          });
          return
        }
        if (this.forumById.accept=='1'){
          this.$message({
            showClose: true,
            message: '楼主已结帖，暂不允许回帖？',
            type: 'warning'
          });
          return
        }
        this.showEditor=true
        var PageId = document.querySelector('#answer_wrap')
        // 打印出对应页面与窗口的距离
        // 使用平滑属性，滑动到上方获取的距离
        // 下方我只设置了top，当然 你也可以加上 left 让他横向滑动
        // widow 根据浏览器滚动条，如果你是要在某个盒子里面产生滑动，记得修改
        window.scrollTo({
          'top': PageId.offsetTop,
          'behavior': 'smooth'
        })
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.form.fromId = JSON.parse(JSON.stringify(this.user.userId))
          this.form.forumId = JSON.parse(JSON.stringify(this.forumId))
          addReply(this.form).then(response => {
            this.msgSuccess("回帖成功");
            this.form={}
            this.showEditor=false
            this.getList()
            updateReplyNumber(JSON.parse(JSON.stringify(this.forumId)))
            if (this.forumById.user.userId==this.user.userId){
              return
            }
            let message = {
              fromId: this.user.userId,
              fromName: this.user.nickName,
              toId: this.forumById.user.userId,
              toName: this.forumById.user.userName,
              messageTitle: '论坛',
              identity:'1',
              type:'1',
              payload: JSON.stringify(this.forumById),
              messageContent: '回复了你的帖子'
            }
            addMessage(message)
          })
        }
      })
    },
    btnClick(e) {

    },

    scrollToTop() {
      const that = this
      var PageId2 = document.querySelector('#answer_wrap')
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > PageId2.offsetTop-650) {
        that.btnFlag = false
      } else {
        that.btnFlag = true
      }
    }
  },
}
</script>


<style scoped>
.user_left{
  height: 100px;
  width: 100px;
  text-align: left;
}
.user_head_box{
  height: 100px;
  width: 100px;
}
</style>
